<template>
  <div class="container_dialBroad">
    <div class="left_dial">
      <div class="chartClass" ref="chart"></div>
    </div>
    <div class="right_legend">
      <ul>
        <li class="bigLi">{{regionName}}</li>
        <li class="itemLi">电压上限:&nbsp;&nbsp; {{upperVoltage}}&nbsp;v</li>
        <li class="itemLi">电压下限:&nbsp;&nbsp; {{lowerVoltage}}&nbsp;v</li>
      </ul>
    </div>
  </div>
</template>

<script>
// let chartInstance = null
export default {
  name: 'dialBroad',
  data () {
    return {
      changeThings: {
        maxScale: 900, // 表盘最大刻度
        real: 300,
        colorCircle: 0.3
      },
      initOption: null,
      regionName: '',
      lowerVoltage: null,
      upperVoltage: null,
      chartInstance: null
    }
  },
  props: {
    realData: {
      type: Object, // 实时值和 max值 和min值
      required: true
    }
  },
  created () {
  },
  mounted () {
    this.initChart()
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  watch: {
    realData: {
      handler (newVal) {
        // console.log('newVal', newVal)
        this.changeThings.real = newVal.real
        this.changeThings.colorCircle = newVal.real / this.changeThings.maxScale
        this.regionName = newVal.region
        this.lowerVoltage = newVal.lowerVoltage
        this.upperVoltage = newVal.upperVoltage
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.chart)
      this.initOption = {
        series: [
          {
            center: ['50%', '92%'], // 仪表的位置
            name: '刻度', // 仪表的名字
            type: 'gauge', // 统计图类型为仪表
            radius: '120%', // 统计图的半径大小 越小刻度尺越在圆环下面
            min: 0, // 最小刻度
            max: this.changeThings.maxScale, // 最大刻度
            splitNumber: 5, // 刻度数量 九个大格
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: {
              // 设置默认刻度盘上的刻度不显示，重新定义刻度盘
              show: false,
              lineStyle: {
                width: 1,
                color: [1, 'rgba(255,255,255,0.8)']
              }
            }, // 仪表盘轴线
            axisLabel: {
              // 仪表盘上的数据
              show: false,
              color: '#4d5bd1' // 仪表盘上的轴线颜色
            }, // 刻度标签。
            axisTick: {
              show: true,
              splitNumber: 10, // 刻度的段落数 最小格子数量
              lineStyle: {
                color: 'rgba(255,255,255,0.8)',
                width: 1 // 刻度的宽度
              },
              length: -4 // 刻度的长度
            }, // 刻度样式
            splitLine: {
              // 文字和刻度的偏移量
              show: true,
              length: -8, // 偏移的长度
              lineStyle: {
                color: 'rgba(255,255,255,0.8)'
              }
            }
          },
          // 下面是上头的颜色圆环 上面的是刻度圆环
          {
            type: 'gauge', // 刻度轴表盘
            radius: '190%', // 刻度盘的大小
            center: ['50%', '95%'], // 刻度盘的位置
            // splitNumber: 9, // 刻度数量
            min: 0, // 最小刻度
            max: this.changeThings.maxScale, // 最大刻度
            startAngle: 180, // 开始刻度的角度
            endAngle: 0, // 结束刻度的角度
            axisLine: {
              // 刻度的线条
              show: true,
              lineStyle: {
                width: 10, // 定义一个宽15的数轴 上圆环的宽度
                color: [
                  // 颜色为渐变色
                  [
                    this.changeThings.colorCircle, // 设置圆环的百分比
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: 'rgb(116,138,161)'
                      },
                      {
                        offset: 1,
                        color: 'rgb(28,144,247)'
                      }
                    ])
                  ],
                  [1, '#413e54']
                ]
              }
            },
            // 分隔线样式。
            splitLine: {
              // 表盘上的轴线
              show: false
            },
            axisLabel: {
            // 表盘上的刻度数值文字
              show: false
            },
            axisTick: {
              // 表盘上的刻度线
              show: false
            },
            pointer: {
              // 表盘上的指针
              show: false
            },
            title: {
              // 标题
              show: true,
              offsetCenter: [0, '-2%'], // x, y，单位px
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
                fontSize: 11 // 表盘上的标题文字大小 实时电压
              }
            },
            // 仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: ['2%', '-24%'],
              color: 'rgb(95,208,217)',
              formatter: function (params) {
                return params + '{unit|v}'
              },
              textStyle: {
                fontSize: 22
              },
              rich: {
                // 可以调上面formatter里嵌套的字符串样式
                unit: {
                  fontSize: 12,
                  color: '#999',
                  padding: [0, 0, 5, 2]
                }
              }
            },
            data: [
              // 当前数值的数据
              {
                name: '实时电压',
                value: this.changeThings.real
              }
            ]
          }
        ]
      }
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    echartsResize () {
      // console.log('48498', this)
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    }
  }
}
</script>

<style scoped>
.container_dialBroad {
  display: flex;
  width: 100%;
  height: 85px;
  box-sizing: border-box;
  padding: 0 5px 5px 10px;

}
.left_dial {
    height: 100%;
    width: 60%;
    
  }
  .chartClass {
      height: 100%;
      width: 100%;

    }
    canvas {
        height: 100% !important;
        width: 100% !important;
      }
  .right_legend {
    margin-left: 10px;
    height: 100%;
    width: 40%;
    box-sizing: border-box;

  }
  ul {
      padding-left: 18px;
      color: rgba(247, 246, 245, 0.863);
      margin: 4px 0;

    }
    li.itemLi {
        font-size: 0.8rem;
        margin-top: 6px;
        list-style-type: square;
      }
      li.bigLi {
        margin-left: -17px;
        margin-bottom: 7px;
        margin: 0 0 7px -16px;
        list-style: none;
        font-size: 16px;
      }
</style>
